<template style="overflow-y: hidden">
  <!-- 为真给homepage加 -->
  <div class="homePage" :style="{ position: pos ? '' : 'relative' }">
    <!-- 背景图 -->
    <!-- 为假给homeimg加 -->
    <div class="homeImg" :style="{ position: pos ? 'relative' : '' }">
      <img :src="imgUrl[imgIndex]" alt="" />
    </div>
    <HomeTime class="center"></HomeTime>
    <!-- 快捷菜单 -->
    <HomeTips class="left" :massageCountOffline1="massageCountOffline"></HomeTips>
    <div class="top">
      <!-- 切换背景图的按钮 -->
      <el-button style="width: 40px; height: 40px" class="imgRplace" circle @click="switchImg" title="切换背景图"><i
          class="el-icon-picture-outline"></i></el-button>
      <!-- 预览大图的按钮 -->
      <el-button v-on:click="showImg = true" style="width: 40px; height: 40px" class="imgRplace" circle
        @click="change" title="预览图片"><i class="el-icon-data-analysis"></i></el-button>
      <!-- 收藏按钮 -->
      <el-button style="width: 40px; height: 40px" class="imgRplace" circle @click="changePath" title="我的收藏"><i class="el-icon-star-off"></i></el-button>
      <!-- 背景图 -->
      <div v-if="showImg" class="over" v-on:click="showImg = false">
        <img :src="imgUrl[imgIndex]" alt="" style="min-width: 100%; min-height: 100%" @click="change" />
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
// import { number } from "echarts";
import HomeTime from "./HomeTime";
import HomeTips from "./HomeTips";
export default {
  components: {
    HomeTime,
    HomeTips,
  },
  data: function () {
    return {
      // title: false,
      pos: false,
      imgArr: [],
      showImg: false,
      imgUrl: [
        "https://www.foodiesfeed.com/wp-content/uploads/2023/06/coffee-latte-with-croissant.jpg",
        "https://www.foodiesfeed.com/wp-content/uploads/2023/05/preparing-mojito-on-a-bar.jpg",
        "https://www.foodiesfeed.com/wp-content/uploads/2023/05/blueberries-full-frame.jpg",
        "https://www.foodiesfeed.com/wp-content/uploads/2023/04/citruses-for-lemonade.jpg",
        "https://www.foodiesfeed.com/wp-content/uploads/2023/06/blueberry-pancakes.jpg",
      ],
      imgIndex: 0,
      formLabelWidth: "120px",
      dialogTableVisible: false,
      dialogVisible: false,
      massageCountOffline: 0,
      talkId: -1,
    };
  },
  mounted() {
    this.talkId = sessionStorage.getItem("userId");
    this.seeMassage()
    this.seeMassageFunc = setInterval(this.seeMassage, 1000 * 10)
    //图片停留
    sessionStorage.getItem('newIndex', Number(this.imgIndex = (this.imgIndex + 1) % this.imgUrl.length))
    this.imgIndex = sessionStorage.getItem('newIndex', Number(this.imgIndex = (this.imgIndex + 1) % this.imgUrl.length)) - 0;
  },
  methods: {
    seeMassage() {
      console.log("消息监控中");
      axios({ url: "/dbdata/userTalk/" + this.talkId + "" }).then(({ data }) => {
        this.massageCountOffline = data.massageCount;
        sessionStorage.setItem(
          "massageOffline",
          Number(this.massageCountOffline)
        );
        axios({ url: "/dbdata/userTalkDetail/" + this.talkId + "" }).then(
          ({ data }) => {
            if (this.massageCountOffline < data.talkDetail.length) {
              let n1 = data.talkDetail.length - this.massageCountOffline;
              this.massageCountOffline = data.talkDetail.length
              if (document.querySelector(".homeChatNotice")) {
                document.querySelector(".homeChatNotice").innerText =
                  "您有" + n1 + "条未读消息";
                document.querySelector(".homeChatNotice").style.color = "red";
              }
              this.$store.commit('changeMassageAll', n1);
            }
          }
        );
      });
    },
    change() {
      this.pos = !this.pos;
      console.log(this.pos);
    },//时间位置改变
    switchImg() {
      sessionStorage.setItem('newIndex', String(this.imgIndex = (this.imgIndex + 1) % this.imgUrl.length))
    },
    changePath(){
      window.location.href="/HappyHome/home/Favriote"
    }
  },
  destroyed() {
    console.log(9999);
    clearInterval(this.seeMassageFunc)
  }
};
</script>
<style scoped lang="less">
.pos {
  position: relative;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.homePage {
  overflow: hidden;
  height: 100%;
  width: 100%;

  .homeImg {
    // position: relative;
    height: 100%;

    img {
      height: 800px;
      width: 100%;
    }
  }

  .center {
    position: absolute;
    top: 12%;
    left: 45%;
    z-index: 120;
  }

  .left {
    position: absolute;
    top: 20px;
    left: 10px;
  }

  .top {
    position: absolute;
    top: 8px;
    right: 15px;

    .el-button {
      font-size: 28px;
      font-weight: 700;
      padding-right: 38px;
      padding-bottom: 35px;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .imgRplace {
      margin-right: 20px;
    }

    .over {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 100;

      img {
        max-width: 80%;
        max-height: 80%;
      }
    }
  }

  .aImg {
    position: absolute;
    bottom: 8%;
    left: 25%;
    z-index: 0;

    .homefriend {
      float: left;
      margin-left: 80px;
      color: #fff;
    }
  }

  .friendName {
    position: absolute;
    left: 25%;
    bottom: 10px;
    color: #fff;
    font-size: 28px;
    font-weight: 500;

    span {
      margin-left: 78px;
    }
  }

  .homefriend>img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    float: left;
  }
}
</style>
